<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <!--    <script src="../js/jquery.1.9.min.js"></script>-->
    <script>
        $(function () {

            $("#payButton").on("click", function () {
                $(".ui.modal").modal("show");
            });

            // $.get("/wenote/user?method=findUserByName", {}, function (data) {
            //     $("#nickname").html("作者："+data.nickname);
            // });

            var noteID = GetRequest();
            var tagName_list = '';
            var comment_list = '';
            $.get("/wenote/note?method=readNote", {noteID: noteID}, function (data) {
                if (data.flag) {
                    $("#nickname").html("作者：" + data.date3.nickname);
                    $("#noteTitle").html(data.data.noteTitle);
                    $("#author").html(data.data.author);
                    $("#createTime").html(data.data.createTime);
                    $("#tagline").html(data.data.noteContent);
                    $("#realTime").html("发表时间：" + data.data.createTime);
                    for (var i = 0; i < data.date1.length; i++) {
                        tagName_list += '<div class="ui teal basic label m-fontsize-medium">' + data.date1[i].tagName + '</div>'
                    }
                    $("#tagName").html(tagName_list);

                    for (var j = 0; j < data.date2.length; j++) {
                        comment_list += '<a class="author"><span>' + data.date2[j].nickname + '</span><div class="ui mini basic orange label m-padding-mini">博主</div></a><div class="metadata"><span class="date">' + data.date2[j].createTime + '</span></div><div class="text">' + data.date2[j].commentContent + '</div><div class="actions"><a class="reply" data-commentid="1" data-commentnickname="Matt" onclick="reply(this)">回复</a></div>'
                    }
                    $("#userComment").html(comment_list);
                } else {
                    alert(data.errorMsg);
                    window.history.go(-1);
                }
            });

            $("#comment-post-btn").click(function () {
                var commentComment = $("#commentMessage").val();
                if (commentComment == null || commentComment.trim().length <= 0) {
                    alert("评论不能为空");
                } else {
                    $.get("/wenote/comment?method=saveComment", {
                        noteID: noteID,
                        commentContent: commentComment
                    }, function (data) {
                        if (data.flag) {
                            alert("发表评论成功");
                            location.reload();
                        } else {
                            alert(data.errorMsg);
                        }
                    });
                }
            });
        });

        function GetRequest() {
            var code = '';
            var url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {    //判断是否有参数
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
                //alert(strs[1]);          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
                code = strs[1];
            }
            return code;
        }

    </script>
</head>
<body>

<!-- 中间内容 -->
<div id="waypoint" class="m-padding-tb-massive">
    <div class="ui container m-container">
        <!-- 头部 -->
        <div class="ui attached segment padded">
            <div class="m-padding-lr">
                <h1 id="noteTitle" class="typo-h1">中文网页重设与排版</h1>
                <div class="ui  horizontal item link list m-margin-tb-mini"> <!-- horizontal代表横着放置 -->
                    <div class="item">
                        <img src="https://tse4-mm.cn.bing.net/th/id/OIP.Ie53C-X76KBg5Yr5rf6JbgHaDe?w=318&h=164&c=7&o=5&pid=1.7"
                             alt="Yonmin" class="ui avatar image">
                        <div id="author" class="content"><a href="#">YonminMa</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon m-icon"></i><span id="createTime">2020-7-28</span>
                    </div>
                    <div class="item right basic">
                        <div class="ui orange basic label">原创</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="ui attached segment padded">
            <!-- 文本内容 -->
            <div id="content" class="js-toc-content typo typo-selection m-padding-responsive m-black">
                <h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>

                <!--                <ol id="table">-->
                <!--                    <li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>-->
                <!--                    <li><a href="#section2">排版实例</a>-->
                <!--                        <ul>-->
                <!--                            <li><a href="#section2-1">例1：论语学而篇第一</a></li>-->
                <!--                            <li><a href="#section2-2">例2：英文排版</a></li>-->
                <!--                        </ul>-->
                <!--                    </li>-->
                <!--                    <li><a href="#section3">附录</a>-->
                <!--                        <ul>-->
                <!--                            <li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>-->
                <!--                            <li><a href="#appendix2">开源许可</a></li>-->
                <!--                        </ul>-->
                <!--                    </li>-->
                <!--                </ol>-->


                <!-- 标签 -->
                <div id="tagName" class="m-padding-lr">
                    <div class="ui teal basic label m-fontsize-medium">方法论</div>
                </div>
                <!-- 赞赏 -->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button m-fontsize-medium">赞赏</button>
                    <div class="ui container">
                        <div style="margin-bottom: 25%;" class="ui tiny modal">
                            <i class="close icon"></i>
                            <div class="header"><i class="user icon"></i>小手一动，快乐加倍</div>
                            <div class="content">
                                <div>
                                    <p><font style="margin-left: 45px;">支付宝</font><font
                                            style="margin-left: 330px;">微信</font></p>
                                    <img src="../images/zfb.jpg" alt="" style="width: 130px;display: inline;"
                                         class="ui rounded bordered image">
                                    <img src="../images/wx.jpg" alt=""
                                         style="width: 130px; display:inline; margin-left: 235px;"
                                         class="ui rounded bordered image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 博客信息 -->
        <div class="ui attached positive message">
            <div class="ui middle aligned stackable grid m-margin-lr">
                <div class="twelve wide column m-fontsize-medium">
                    <li id="nickname">作者 [[${blog.user.nickname}]] <a href="#">(联系作者)</a></li>
                    <li id="realTime">发表时间 [[${#dates.format(blog.updateTime, 'yyyy-MM-dd HH:mm')}]]</li>
                    <li>版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
                    </li>
                </div>
                <div class="four wide column m-padding-lr-large">
                    <img src="../images/zfb.jpg" style="width: 120px;" alt=""
                         class="ui centered rounded bordered image">
                </div>
            </div>
        </div>
        <!-- 评论区 -->
        <div class="ui bottom attached segment">
            <!-- 留言区 -->
            <div id="comment-container" class="ui segment teal m-margin-lr">
                <div>
                    <div class="ui m-fontsize-medium comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        <div class="comment">
                            <div id="userComment" class="content">
                                <a class="author">
                                    <span>Yonmin</span>
                                    <div class="ui mini basic orange label m-padding-mini">博主</div>
                                </a>
                                <div class="metadata">
                                    <span class="date">今天下午 5:42</span>
                                </div>
                                <div class="text">太赞了！</div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                       onclick="reply(this)">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="comment-form" class="ui form m-margin-lr m-fontsize-medium">
                <input type="hidden" name="noteID">
                <input type="hidden" name="CommentID" value="-1">
                <div class="field">
                    <textarea id="commentMessage" name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide">
                        <button id="comment-post-btn" type="button" class="ui teal button m-mobile-wide">
                            <i class="edit icon"></i>发布
                        </button>
                        <a href="index.html">
                            <button type="button" class="ui teal button m-mobile-wide">
                                <i class="edit icon"></i>返回
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="toolbar" class="m-padding m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui teal toc button">目录</button>
        <a href="#comment-container" type="button" class="ui teal button">评论</a>
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>

<div class="ui toc-container flowing popup center transition hidden">
    <div class="js-toc"></div>
</div>

<!--<script>-->
<!--    $('.show').click(function () {-->
<!--        $('.m-item').toggleClass('m-mobile-hide')-->
<!--    });-->

<!--    $('#toTop-button').click(function () {-->
<!--        $(window).scrollTo(0, 500);-->
<!--    });-->

<!--    $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/)({});-->
<!--    $('.newblog-container').load(/*[[@{/footer/newblogs}]]*/);-->

<!--    $('.ui.form').form({-->
<!--        fields: {-->
<!--            content: {-->
<!--                identifier: 'content',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    type: 'empty',-->
<!--                    prompt: '内容：请输入评论内容'-->
<!--                }]-->
<!--            },-->
<!--            nickname: {-->
<!--                identifier: 'nickname',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    prompt: '昵称：请输入昵称'-->
<!--                }]-->
<!--            }-->
<!--        }-->
<!--    });-->
<!--    $('#comment-post-btn').click(function () {-->
<!--        var boo = $('.ui.form').form('validate form');-->
<!--        if (boo == true) {-->
<!--            console.log('校验成功');-->
<!--            postData();-->
<!--        } else {-->
<!--            console.log('校验失败')-->
<!--        }-->
<!--    });-->

<!--    function postData() {-->
<!--        $('#comment-container').load(/*[[@{/comments}]]*/"/comments", {-->
<!--            "parentComment.id": $("[name='parentComment.id']").val(),-->
<!--            "blog.id": $("[name='blog.id']").val(),-->
<!--            "nickname": $("[name='nickname']").val(),-->
<!--            "content": $("[name='content']").val()-->
<!--        }, function (resoonseTxt, statusTxt, xhr) {-->
<!--            clearContent();-->
<!--        });-->
<!--    }-->

<!--    function clearContent() {-->
<!--        $("[name='content']").val('');-->
<!--        $("[name='parentComment.id']").val(-1);-->
<!--        $("[name='content']").attr("placeholder", "请输入评论信息...");-->
<!--    }-->

<!--    function reply(obj) {-->
<!--        var commentId = $(obj).data('commentid');-->
<!--        var commentNickname = $(obj).data('commentnickname');-->
<!--        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();-->
<!--        $("[name='parentComment.id']").val(commentId);-->
<!--        $(window).scrollTo($('#comment-form'), 300);-->
<!--    }-->
<!--</script>-->
</body>
</html>